<template>
  <div>
    <transition name="el-zoom-in-center">
      <div v-show="showTran1" class="transition-box">
        <el-popconfirm title="确认启动该任务吗？" placement="right" confirm-button-text='确定' cancel-button-text='取消'
          icon="el-icon-info" icon-color="yello" @onConfirm="handleClick1">
          <el-button slot="reference" type="primary" size="mini" :loading="loading" plain>{{buttonName1}}</el-button>
        </el-popconfirm>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <div v-show="showTran2" class="transition-box">
        <el-popconfirm :title="title" placement="right" confirm-button-text='确定' cancel-button-text='取消'
          icon="el-icon-info" icon-color="yello" @onConfirm="handleClick2">
          <el-button slot="reference" type="success" size="mini" :loading="loading" plain>{{buttonName2}}</el-button>          
        </el-popconfirm>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <div v-show="showTran3" class="transition-box" style="margin-top: 10px">
       <el-popconfirm title="确认测试该任务吗？" placement="right" confirm-button-text='确定' cancel-button-text='取消'
          icon="el-icon-info" icon-color="yello" @onConfirm="handleClick3">
          <el-button slot="reference" type="primary" size="mini" :loading="loading3" plain>{{buttonName4}}</el-button>
        </el-popconfirm>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <div v-show="showTran4" class="transition-box" style="margin-top: 10px">
        <el-popover placement="right">
          <el-button slot="reference" type="danger" size="mini" :loading="loading2" plain @click="showFormMethod">{{buttonName3}}</el-button>
          <div>
            <el-form :rules="rules" :model="form" ref="form" v-show="showForm" :disabled="disabled">
              <el-form-item label="阻塞原因:" required style="width:500px" prop="blockDescript">
                <el-input type="textarea" :rows="5" v-model="form.blockDescript"></el-input>
              </el-form-item>
              <el-form-item style="float:right; margin-top: 5px">
                <el-button type="primary" size="mini" :loading="loading2" plain @click="submitBlock('form')">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-popover>
      </div>
    </transition>
  </div>
</template>
<script>
  import {taskStart, taskTest, taskReStart, taskCancel, taskBlock, taskFinish} from '@/api/task'
  export default {
    name: 'startPop',
    data() {
      var checkBlockDescript = (rule, value, callback) => {!value?callback(new Error('请输入阻塞原因')):callback()}
      return {
        showTran1: false,
        showTran2: false,
        showTran3: false,
        showTran4: false,
        loading: false,
        loading2: false,
        loading3: false,
        buttonName1: '任务启动',
        buttonName2: '任务完成',
        buttonName3: '阻塞任务',
        buttonName4: '申请测试',
        title: '确认完成该任务吗？',
        status: -1,
        showForm: false,
        disabled: false,
        form: {
          blockDescript: ''
        },
        rules: {
          blockDescript: [{ validator: checkBlockDescript, trigger: 'blur' }],
        }
      };
    },
    props: ['row'],
    methods: {
      showFormMethod() {
        this.showForm = true
      },
      handleClick1() {
        this.loading = true
        this.buttonName1 = '启动中...'
        this.sleep(1500).then( _ => {
          taskStart(this.row.taskId).then( response => {
            this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 1)
            this.loading = false
            this.buttonName1 = '任务启动'
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.showTran1 = false
            this.sleep(500).then( _ => {
              this.showTran2 = true
              this.showTran3 = true
              this.showTran4 = true
            })
          })
        })
      },
      handleClick2() {
        this.loading = true
        if (this.row.status==1) {
          this.buttonName2 = '完成中...'
          this.sleep(1500).then( _ => {
            taskFinish(this.row.taskId).then( response => {
              this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 2)
              this.loading = false
              this.buttonName1 = '任务完成'
              this.title = '确认完成该任务吗?',
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.showTran1 = false
              this.showTran2 = false
              this.showTran3 = false
              this.showTran4 = false
            })
          })
        } else {
          this.buttonName2 = '操作中...'
          this.sleep(1500).then( _ => {
            taskReStart(this.row.taskId).then( response => {
              this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 1)
              this.loading = false
              this.title = '确认完成该任务吗?'
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.showTran2 = false
              this.sleep(500).then( _ => {
                this.buttonName2 = '任务完成'
                this.showTran2 = true
                this.showTran3 = true
                this.showTran4 = true
              })
            })
          })
        }        
      },
      handleClick3() {
        this.loading3 = true
        this.buttonName4 = '操作中...'
        this.sleep(1500).then( _ => {
          taskTest(this.row.taskId).then( response => {
            this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 5)
            this.loading3 = false
            this.buttonName4 = '开始测试'
            this.showTran4 = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.showTran1 = false
            this.showTran3 = false
            this.sleep(500).then( _ => {
              this.showTran2 = true
              this.showTran4 = true
            })
          })
        })
      },
      submitBlock(formName) {
        this.loading2 = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sleep(1500).then( _ => {
              this.buttonName3 = '操作中...'
              this.loading2 = true
              this.disabled = true
              taskBlock(this.row.taskId, this.form.blockDescript).then(response => {
                this.$parent.$parent.$parent.$parent.$parent.changeStatus(this.row.taskId, response, 3)
                this.loading2 = false
                this.disabled = false
                this.showForm = false
                this.buttonName2 = '返回开发'
                this.buttonName3 = '阻塞任务'
                this.title = '确认返回该任务状态?'
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.showTran1 = false
                this.showTran2 = false
                this.showTran3 = false
                this.showTran4 = false
                this.sleep(500).then( _ => {
                  this.showTran2 = true
                })
              })
            })
          }
        })
      },
      sleep(time) {
        return new Promise((resolve) => {
          setTimeout(resolve, time)
        });
      },
      tranShow() {
        if (this.status!==-1) {
          return
        }
        this.status = this.row.status
        if (this.status==0) {
          this.showTran1 = true
        }
        if (this.status==1) {
          this.showTran2 = true
          this.showTran3 = true
          this.showTran4 = true
          this.title = '确认完成该任务吗？'
        }
        if (this.status==3) {
          // 打开返回、测试
          this.showTran2 = true
          this.showTran3 = true
          this.showTran4 = false
          this.buttonName2 = '返回开发'
          this.title = '确认返回该任务状态?'
        }
        if (this.status==5) {
          // 打开返回、堵塞
          this.showTran2 = true
          this.showTran3 = false
          this.showTran4 = true
        }
      }
    },
    mounted() {
      this.tranShow()
    }
  };

</script>
